<template>
	<!-- 		<el-row class="row-bg" justify="center">
		  <el-col :span="6"><div class="grid-content bg-purple">1aaaaaaaaaa1aaaaaaaaaa1aaaaaaaaaa</div></el-col>
		  <el-col :span="6"><div class="grid-content bg-purple-light">21</div></el-col>
		  <el-col :span="6"><div class="grid-content bg-purple">12</div></el-col>
		</el-row> -->
	<div class="main" v-loading="loading">
		<div class="index">首页</div>
		<div class="content">
			<div class="left">
				<!-- 今日数据变动 start -->
				<div class="top">
					<div class="title">今日数据变动</div>
					<div class="userNum">
						<div class="item" v-for="i in todayData">
							<div>
								<div class="name">{{i.name}}</div>
								<div class="num"><span class="red">{{i.num}}</span>人</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 今日数据变动 end -->
				
				<!-- 折线图 start -->
				<div class="echarts" @dblclick="echartsDblclick" style="position: relative;">
					<el-popover trigger="hover">
						<template #reference>
							<div class="undTian" title="修改日,显示天数"> </div>
						</template>
						<el-input v-model="dateDate30" @change="dateEchartsData" prefix-icon="el-icon-s-order"
							placeholder="日: 365天内" title="日: 365天内"></el-input>
					</el-popover>
					<div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
				</div>
				<!-- 折线图 end -->
			</div>
			
			<div class="right">
				<!-- 事项提醒 start-->
				<div class="matter">
					<div class="title">事项提醒</div>
					<div class="list">
						<div class="item" v-for="i in 20">
							<div class="xf">续费</div>
							<div class="text">有 <span class="red">0</span> 位学员剩余课时低于2</div>
						</div>
					</div>
				</div>
				<!-- 事项提醒 end -->
				
				<!-- 学员生日 start -->
				<div class="birthday">
					<div class="title">生日学员</div>
					<div class="list">
						<div class="item" v-for="i in userBirthday">
							<div class="left1">
								<el-avatar shape="square" class="img" :size="30"
									:src="'https://api.eshareedu.cn/edusystems/upload/'+i.photo"></el-avatar>
								<span class="name"> {{i.name}} </span>
							</div>
							<div class="right1">
								{{i.birthday}}
							</div>
						</div>
					</div>
				</div>
				<!-- 学员生日 end -->
			</div>
		</div>
	</div>
</template>

<script>
	// 引入表格
	import * as echarts from 'echarts/core';
	import {TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent} from 'echarts/components';
	import {LineChart} from 'echarts/charts';
	import {CanvasRenderer} from 'echarts/renderers';
	echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart,CanvasRenderer]);

	export default {
		data() {
			return {
				loading: true, // 转圈特效
				todayData: [ // 今日数据变动
					{'zd': 'addCounts','num': 0,'name': '新增学员'},
					{'zd': 'renewCounts','num': 0,'name': '带续费学员'},
					{'zd': 'courseCounts','num': 0,'name': '今日课节'},
					{'zd': 'leaveCounts','num': 0,'name': '请假人数'},
					{'zd': 'studentCounts','num': 0,'name': '上课学员人数'},
					{'zd': 'teacherCounts','num': 0,'name': '上课老师人数'}
				],
				userBirthday: [], // 学员生日
				echartsName: '双击日/月切换', // 折线图名字
				echartsDataName: ['学生总数', '单次增加'], // 折线图数据名字
				dateDate30: 30, // 单日 - 获取近30天数据
				echartsYearInfo: [], // 近30天月份  单日增加  当天总人数
				isEcharts: false, // true 日   false 月(默认)
				y: '', // 年
				m: '', // 月
				d: '', // 日
			}
		},

		created() {
			this.times();
			// this.getData();
		},

		mounted() {
			//  根据窗口大小调整曲线大小
			window.onresize = () => {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('myChart'));
				myChart.resize();
			};

			// 关闭 loading
			let self = this
			setTimeout(function() {
				if (self.loading == true) {
					self.$message.error('首页 - 加载失败')
					self.loading = false
				}
			}, 2000)
		},

		methods: {
			times(n1, n2, n3 = 0) {
				/**
				 * 加载时间
				 */
				if (n1) var date = new Date(n1, n2, n3);
				else var date = new Date();

				this.y = date.getFullYear();
				this.m = date.getMonth();
				this.d = date.getDate();
			},


			async getData() {
				/**
				 * 页面加载
				 */
				const {data: res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/todaycounts');
				this.todayData.forEach((item, key) => {
					this.todayData[key].num = res.data.model[item.zd]
				})

				// 学员生日
				const {
					data: res1
				} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/birthday');
				this.userBirthday = res1.data.list
				this.monthEchartsData();
				this.loading = false;
			},


			async monthEchartsData() {
				/**
				 * 加载 折线图 月
				 */
				this.times();
				this.isEcharts = true
				// 学生总数 单月总数
				const {
					data: res2
				} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/allcounts?year=' + this.y);
				const {
					data: res3
				} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/monthcounts?year=' + this
				.y);
				this.echartsInfo(
					this.columnS(res2.data.list, 'month'),
					this.columnS(res3.data.list, 'counts'),
					this.deleteData(this.columnS(res2.data.list, 'counts', this.m + 1)),
				)
			},


			async dateEchartsData() { // 我写了一夜。。。后半部分感觉自己觉醒了。速度真快。质量。。。 7小时左右   2021年7月4日06点57分
				/**
				 * 加载 折线图 日
				 */
				this.times();
				this.isEcharts = false
				var y = this.y // 获取近30天日期便利到单日增加 echartsYearInfo
				var m = this.m // 额2021年7月4日00点06分 写了块俩小时, 感觉没5小时写不下来
				var d = this.d
				var dateNum = this.dateDate30 // 双向绑定 - 展示天数
				var dataDs = []; // 下标 存日期
				var dataKey = []; // 下标 存日期 0
				while (true) { // 根据展示天数向前循环日期
					// 循环写入日期
					for (var i = d; i > d - dateNum; i--) {
						if (i == 0) break;
						var ms = m + 1 < 10 ? ('0' + (m + 1)) : m + 1
						var is = i < 10 ? ('0' + i) : i
						dataDs[ms + '' + is] = (m + 1) + '月' + i
						dataKey[ms + '' + is] = 0
					}

					if (dateNum - d >= 0) { // 判断减去当月天数是否还不满足展示天数
						dateNum = dateNum - d // 这里不应该写在if中因为方法没进来，却执行了减法操作
						this.times(y, m) // 获取上一个月份 天数
						y = this.y
						m = this.m
						d = this.d
					} else break
				}

				// 日期
				var dataD = [] // ["6月5", "6月6", "6月7", "6月8"...
				for (var i in dataDs) {
					dataD.unshift(dataDs[i])
				}

				// 数组格式化后，一次性填入
				const {
					data: res
				} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/list?page=1&psize=99999');
				var dataMeiRi = [] // 每日增加
				res.data.list.forEach((i, k) => {
					if (i.birthday) {
						var keys = i.birthday.substr(-5, 2) + '' + i.birthday.substr(-2, 2)
						dataMeiRi.push(keys)
					}
				})

				for (var i in dataMeiRi) {
					if (dataKey[dataMeiRi[i]] == 0) {
						dataKey[dataMeiRi[i]]++
					}
				}

				// 每日新增
				var dataRen = []
				for (var i in dataKey) {
					dataRen.unshift(dataKey[i])
				}

				// 总人数
				var dataSum = []
				var sum = 0;
				for (var i in dataRen) {
					sum += dataRen[i]
					dataSum.push(sum)
				}

				this.echartsInfo(dataD, dataRen, dataSum);
			},


			echartsInfo(dataD, dataRen, dataSum) {
				/**
				 * 折线图
				 */
				// 加载折线图  上边等待了，所以可以加载  否则放入 mounted 方法
				let myChart = echarts.init(document.getElementById("myChart"));
				myChart.setOption({ // 绘制图表
					title: {
						text: this.echartsName
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: this.echartsDataName
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataD
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '学生总数',
							type: 'line',
							data: dataSum
						},
						{
							name: '单次增加',
							type: 'line',
							data: dataRen
						}
					]
				});
			},


			echartsDblclick() {
				/**
				 * echarts 被双击
				 */
				if (this.isEcharts) this.dateEchartsData()
				else this.monthEchartsData()
			},


			columnS(date, zid, num = this.m) {
				/** 取一列
				 * data： 数据
				 * zid: 	字段
				 * num:		取几个
				 */
				try {
					var res = [];
					date.forEach((item, key) => {
						res.push(item[zid])
						if (key == num) throw new Error('ok');
					})
				} catch (e) {
					if (e.message != "ok") throw e;
				};

				return res
			},


			deleteData(data) {
				/**
				 * 字段处理 月份
				 */
				var info = data.splice(0, 1)
				data.push(info[0])
				return data
			}

		}
	}
</script>

<style lang="less" scoped>
	/* *{  // 少使用 px 使用 vw vh vmax vmin 100% max/min-width/height
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex: 1;
		margin: 0;
		padding: 0;
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	} 
	.fcol{
		flex-direction: column;
		justify-content: space-between;
	}*/
	// 总结： 结构没分清楚，对vh vw max/min-width/height 不熟悉  没有使用overflow  宽高不熟悉
	.lh {
		width: 100vw; // 内元素使用 flex 和方向来实现
		height: 100vh;
		min-width: 100px;
		min-height: 100px;
		box-sizing: border-box;
		border: 1px solid red;
		border-radius: 4px;
		box-shadow: 0 0 50px green;
		margin: auto;
		position: absolute;
		transform: translate(-50%, -50%);
		background-color: black;
		padding: auto;
		display: flex;
		text-align: center;
		line-height: 100px;
		font-size: 10px;
		color: white;
		text-indent: 2em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/**
		 * float clear
		 */
	}

	.main {
		height: 90vh;
		min-width: 1000px;
		min-width: 920px;
		margin: 0 20px;
		overflow: hidden;
		font-size: 12px;

		.index {
			height: 40px;
			line-height: 40px;
			margin-top: 6px;
		}

		.content {
			height: 92%;
			display: flex;
			justify-content: space-between;

			.birthday,
			.matter,
			.echarts,
			.top {
				background-color: white;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
			}

			.left {
				width: 81%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					height: 40px;
					line-height: 40px;
				}

				.top {
					// flex: 1;
					height: 135px;
					margin-bottom: 1%;
					padding: 0 20px;

					.userNum {
						display: flex;

						.item {
							flex: 1;
							height: 80px;
							border: 1px solid #eee;
							display: flex;
							align-items: center;
							justify-content: center;

							.name,
							.num {
								text-align: center;
							}

							.red {
								color: red;
							}
						}
					}
				}

				.echarts {
					flex: 4;

					.undTian {
						width: 130px;
						height: 30px;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
						position: absolute;
						cursor: pointer;
						z-index: 1;
					}
				}
			}

			.right {
				width: 18%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					border-bottom: 1px solid #eee;
				}

				.matter {
					max-height: 40vh;
					margin-bottom: 2%;
					padding: 0 10px;

					.list {
						height: 80%;
						overflow: auto;

						.item {
							margin: 6px 0;
							display: flex;
							align-items: center;

							.xf {
								width: 50px;
								height: 25px;
								line-height: 25px;
								margin-right: 10px;
								background-color: #e8f5fe;
								color: #0387ff;
								text-align: center;
							}

							.red {
								color: red;
							}
						}
					}
				}

				.birthday {
					flex: 1;
					max-height: 40vh;
					margin-top: 2%;
					padding: 0 10px;

					.list {
						height: 80%;
						overflow: auto;

						.item {
							padding: 6px 0;
							display: flex;
							justify-content: space-between;
							display: flex;
							align-items: center;
							border-bottom: 1px solid #eee;

							.left1 {
								display: flex;
								align-items: center;

								.name {
									margin-left: 10px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
